<template>
	<view class="ys">
		<!-- 展示地图信息  标绘位置情况 -->
		<view class="myMap">
			<u-divider text="地图展示"></u-divider>
			<map id="mymap" class="myMap_map" @tap="mapAction" :longitude="mapData.longitude"
				:latitude="mapData.latitude" :scale="mapData.scale" :polygons="mapData.polygons"
				:markers="mapData.markers" :enable-zoom="enableZoom">
				<cover-view class="myMap_map__cover-view">
					<cover-view class="myMap_map__cover-view_mapControls">
						<!-- 显示绘制的控件-->
						<cover-view class="myMap_map__cover-view_mapControls_drawControl"
							:class="item.check ? 'myMap_map__cover-view_mapControls_checkdrawControl' : '' "
							@click="mapEdit(item)" v-for="(item,index) in mapControls" :key="index">
							<cover-image class="myMap_map__cover-view_mapControls_drawControl_drawicon"
								:src="item.icon"></cover-image>
							<cover-view
								class="myMap_map__cover-view_mapControls_drawControl_drawText">{{ item.label }}</cover-view>
						</cover-view>
					</cover-view>
				</cover-view>
			</map>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 地图的相关操作
				mapData: {
					//设置地图中心点 lon经度y、lat纬度x
					longitude: '119.965238',
					latitude: '35.916325',
					infowidth: 6,
					infoheight: 6,
					scale: 18,
					markers: [],
					polyline: [],
					polygons: [],

				},
				//地图控件
				mapControls: [
					// 标绘位置
					{
						id: 'drawPolygon',
						check: false,
						icon: '/static/img/fz.png',
						method: 'drawPolygons',
						label: '标绘位置'
					},
					//清除
					{
						id: 'cleanPolygon',
						check: false,
						icon: '/static/img/fz.png',
						method: 'cleanPolygons',
						label: '清除'
					}
				],
				//单击事件时间差
				taptimestame: {
					firsttime: null,
					lasttime: null
				},
				enableZoom: true,
			}
		},
		onLoad() {

		},
		methods: {
			mapEdit(item) {
				item.check = !item.check;
				switch (item.id) {
					// 绘制面
					case 'drawPolygon':
						this.drawPolygons();
						break;
						//清除
					case 'cleanPolygon':
						this.cleanPolygons();
						break;
					default:
						break;
				}
			},
			//绘制面
			drawPolygons() {
				this.enableZoom = false
			},
			cleanPolygons() {
				this.mapData = {
					//设置地图中心点 lon经度y、lat纬度x
					longitude: '119.965238',
					latitude: '35.916325',
					infowidth: 6,
					infoheight: 6,
					scale: 18,
					markers: [],
					polyline: [],
					polygons: [],

				}
			},

			//点击地图事件
			mapAction(e) {
				if (this.taptimestame.firsttime == null) {
					//第一次定位，给firsttime赋值
					this.taptimestame.firsttime = e.timeStamp;
				} else if (this.taptimestame.lasttime == null) {
					//第二次定位，给lasttime赋值
					this.taptimestame.lasttime = e.timeStamp;
				} else {
					this.taptimestame.firsttime = this.taptimestame.lasttime;
					this.taptimestame.lasttime = e.timeStamp;
				}
				//判断是否已经点击标绘位置，如果点击标绘位置后开始定位
				if (this.mapControls[0].check) {
					this.mapData.markers.push({
						id: this.mapData.markers.length + 1,
						longitude: e.detail.longitude,
						latitude: e.detail.latitude,
						iconPath: '/static/img/fz.png',
						height: this.mapData.infoheight,
						width: this.mapData.infowidth
					})
					if (this.mapData.markers.length >= 2) {
						this.pointsData = [];
						for (let i = 0; i < this.mapData.markers.length; i++) {
							this.pointsData.push({
								latitude: this.mapData.markers[i].latitude,
								longitude: this.mapData.markers[i].longitude
							})
						}
						this.mapData.polyline.push({
							points: this.pointsData,
							color: '#00AF99',
							width: 2,
						})

						if (this.mapData.polyline.length >= 3) {
							//判断两次单击事件的时间差
							if (this.taptimestame.lasttime - this.taptimestame.firsttime < 500) {
								this.pointsData = [];
								//在双击事件中 生成polygon
								for (let i = 0; i < this.mapData.markers.length; i++) {
									this.pointsData.push({
										latitude: this.mapData.markers[i].latitude,
										longitude: this.mapData.markers[i].longitude
									})
								}
								this.mapData.polygons.push({
									points: this.pointsData,
									strokeWidth: 2,
									strokeColor: '#00AF99',
									fillColor: '#00AF9930'
								})

								//最后将点、线段的数据清空
								this.mapData.markers = [];
								this.mapData.polyline = [];
								this.mapControls[0].check = false;
							}

						}
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	map {
		width: 100vw;
		height: 100vh;
	}

	.myMap_map__cover-view {
		position: absolute;
		left: 0;
		bottom: 10vh;
	}

	.myMap_map__cover-view_mapControls_drawControl {
		font-size: 12px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 20px;
		opacity: .7;
	}

	.myMap_map__cover-view_mapControls_checkdrawControl {
		opacity: 1;
	}

	.myMap_map__cover-view_mapControls_drawControl_drawicon {
		width: 35px;
		height: 35px;
		margin-bottom: 5px;
	}
</style>